<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<%-- 搜索区域 --%>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="realname" class="layui-input" placeholder="姓名" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-inline">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <select id="role">
                        <option value="">角色</option>
                        <option value="1">管理员</option>
                        <option value="2">业务员</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="layui-inline">
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select id="deleted">
                        <option value="">状态</option>
                        <option value="1">在职</option>
                        <option value="2">离职</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="searchBtn">
                <i class="layui-icon layui-icon-search"></i>
                查询
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>

    </div>
</form>
<%-- 数据展示区域 --%>
<hr>
<table id="dataTable" lay-filter="dataTableFilter"></table>
<%-- 头工具栏 --%>
<script type="text/html" id="headerBtns">
    <button class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>
<%-- 行工具栏 --%>
<script type="text/html" id="rowBtns">
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="resetPass">
        <i class="layui-icon layui-icon-refresh"></i>
        重置密码
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
        离职
    </button>
</script>

<%-- 新增数据的模板 --%>
<script type="text/html" id="addTpl">
    <form class="layui-form layui-form-pane" style="padding-top: 15px;padding-left: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="账号" class="layui-input" lay-verify="required" lay-reqText="账号不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" value="123456" readonly  class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="realname" placeholder="姓名" class="layui-input" lay-verify="required" lay-reqText="姓名不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline" style="width: 210px">
                <input type="radio" name="role" title="管理员" value="1"  >
                <input type="radio" name="role" title="业务员" value="2" checked  >
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-filter="subBtnFilter" lay-submit></button>
    </form>
</script>

<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form','jquery','layer','table'],function (){
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let table = layui.table;
        let cxt = '${pageContext.request.contextPath}';// /cms

        //1. 渲染数据表格
        //1.1. 表格渲染的参数
        let tabOpt = {
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt+"/user.do?service=page",//表格的数据接口
            page:true,//开启分页
            toolbar:"#headerBtns",
            cols:[[
                {field:"username",title:"账号"},
                {field:"password",title:"密码"},
                {field:"realname",title:"姓名"},
                {field:"role",title:"角色",templet:function (d) {
                    let role = d.role;
                    if(role == 1){
                        return "<b style='color:red'>管理员</b>"
                    }else if(role == 2){
                        return "<b style='color:green'>业务员</b>"
                    }

                    }},
                {field:"deleted",title:"状态",templet:function (d) {
                        let deleted = d.deleted;
                        if(deleted == 1){
                            return "<b style='color:red'>在职</b>"
                        }else if(deleted == 2){
                            return "<b style='color:gray'>离职</b>"
                        }

                    }},
                {field:"createTime",title:"创建时间"},
                {field:"deletedTime",title:"离职时间"},
                {title:"操作",toolbar:"#rowBtns",minWidth:215}
            ]],
            parseData:function (rs){
                /*
                *  layui的标准数据格式
                *  { code : 0,msg:"消息",total:1000,data:[]}
                *
                * */

                return {
                    "code" : rs.code,
                    "msg" : rs.msg,
                    "total" : rs.data.total,
                    "data" : rs.data.data
                }

            },
            response : {
                statusCode : 200  //覆写了layui的正确时的响应码  从  0 改为了200
            }
        };
        let tabIns = table.render(tabOpt);
        //2. 点击查询按钮搜素功能
        $("#searchBtn").click(function (){
            let realname  = $("#realname").val();
            let role  = $("#role").val();
            let deleted  = $("#deleted").val();
            tabIns.reload({
                where:{
                    "realname":realname,
                    "role":role,
                    "deleted":deleted
                }
            });

        });
      /********************************************************************************/
        /*头工具栏监听事件*/
        table.on("toolbar(dataTableFilter)",function (d) {
           let event = d.event; //是按钮上的lay-event的值
            if(event == "add"){
                //新增员工
                add();
            }
        });

        /**
         *  进行具体的员工新增
         */
        function add() {
            let layerOpt = {
                title:"编辑",
                type:1,
                content:$("#addTpl").html(),
                area:['350px','450px'],
                offset:"t",
                btn:['确认','取消'],
                btnAlign:'c',
                success:function (layero,index) {
                    form.render();
                    //为表单绑定提交事件
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;
                        formData.service = "add";
                        //使用ajax提交数据
                        $.post(cxt+"/user.do",formData,function (rs) {
                            if(rs.code != 200){
                                layer.msg(rs.msg);
                                return false;
                            }
                            //提交成功  1. 关闭弹层   2. 刷新表格数据
                            layer.close(index);
                            //刷新表格数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })


                },
                yes:function (index,layero) {
                    $("#subBtn").click();//使用程序触发提交按钮的点击事件
                }
            };
            layer.open(layerOpt);
            
        }
        /********************************************************************************/
        /*行工具栏监听事件*/
        table.on("tool(dataTableFilter)",function (d) {
            let event = d.event; //是按钮上的lay-event的值
            let rowData = d.data;//行数据
            if(event == "resetPass"){
                //新增员工
                resetPass(rowData);
            }else if(event == "del"){
                del(rowData);
            }
        });

        /**
         * 重置密码
         * @param rowData
         */
        function resetPass(rowData) {
            layer.confirm("确定要重置密码吗?",function (index) {
                //发送重置密码的请求
                $.get(cxt+"/user.do?service=resetPass&id="+rowData.id,function (rs) {
                    layer.msg(rs.msg);
                    layer.close(index);
                    $("#searchBtn").click();
                })
            });
        }
        /**
         * 员工离职
         * @param rowData
         */
        function del(rowData) {
            layer.confirm("确定要该员工要离职吗?",function (index) {
                //发送员工要离职的请求
                $.get(cxt+"/user.do?service=del&id="+rowData.id,function (rs) {
                    layer.msg(rs.msg);
                    layer.close(index);
                    $("#searchBtn").click();
                })
            });
        }





    })
</script>
</body>
</html>
